div<template>
  <div>
    <div style="display: flex;">
      <div style="border-right: 1px solid #d8d8d8; flex: 1; padding: 0 15px;">
        <a-input-search v-model="staffFrom.name" placeholder="搜索人员姓名" @search="onSearch" />
        <div @click="onCheckAll" style="cursor: pointer; margin: 5px;">
          全选

          <i v-if="checkAll" style="font-size: 19px;" class="iconfont icon-check-circle-fill primary_color"> </i>
          <img v-else src="@/assets/icons/未选择.png" style="width: 18px; height: 18px;" />
        </div>

        <a-spin tip="人员加载中..." :delay="300" :spinning="spinning">
          <div style="height: 420px; overflow-y: auto; padding: 0 15px;">
            <a-empty v-if="staffData.length === 0 && !spinning" description="暂无人员" />
            <div
              v-else
              @click="onRow(item)"
              v-for="(item, index) in staffData"
              :key="index"
              style="
                  cursor: pointer;
                  height: 40px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
            >
              <span
                ><a-avatar :src="item.empPhoto" size="small" style="margin-right:5px" icon="user" />{{ item.name }}{{ item.phone }}</span
              >
              <i v-if="item.isTrue" style="font-size: 19px;" class="iconfont icon-check-circle-fill primary_color"> </i>

              <img v-else src="@/assets/icons/未选择.png" style="width: 18px; height: 18px;" />
            </div>
          </div>
        </a-spin>
      </div>
      <div style="flex: 1; padding: 0 15px;">
        <div style="margin-bottom:15px">
          已选择的人员
          <span class="empList">{{ empList.length }}人</span>

          <div style="height: 420px; overflow-y: auto; padding: 0 15px;">
            <div
              v-for="(item, index) in empList"
              :key="index"
              style="
                  cursor: pointer;
                  height: 40px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
            >
              <span
                ><a-avatar :src="item.empPhoto" size="small" style="margin-right:5px" icon="user" /> {{ item.name }}{{ item.phone }}</span
              >

              <img @click="deleteItem(item, index)" src="@/assets/icons/删除.png" style="width: 18px; height: 18px;" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userList } from "./api";
export default {
  data() {
    return {
      staffData: [],
      pageCount: 0,
      checkAll: false,
      staffFrom: {},
      spinning: true
    };
  },
  props: {
    give: String,
    empList: Array
  },
  model: {
    prop: "give",
    event: "returnBack"
  },
  created() {
    this.getPageEmpLists();
  },

  methods: {
    getPageEmpLists() {
      this.spinning = true;
      userList(this.staffFrom, this.$store.state.hr.companyId)
        .then(res => {
          res.data.forEach((element, index) => {
            res.data[index].isTrue = false;
          });

          this.empList.forEach(element => {
            res.data.forEach(esy => {
              if (element.id === esy.id) {
                esy.isTrue = true;
              }
            });
          });
          this.staffData = res.data;
          this.pageCount = res.data.entityCount;

          const arr = this.staffData.filter(item => item.isTrue);
          this.checkAll = !!(arr.length === this.staffData.length && arr.length !== 0);
        })
        .catch(err => {
          console.log("debug log --> ", err);
        })
        .finally(() => {
          this.spinning = false;
        });
    },
    // 选中某一个
    onRow(item) {
      item.isTrue = !item.isTrue;
      if (item.isTrue) {
        let num = 0;
        this.staffData.forEach(element => {
          if (element.isTrue) {
            num += 1;
          }
        });
        this.checkAll = this.staffData.length === num;

        const arr = this.empList.filter(items => items.id === item.id);
        if (arr.length === 0) {
          this.empList.push(item);
          const tetx = [];
          this.empList.map(item => {
            tetx.push(item.id);
          });
          this.$emit("returnBack", tetx.join(","));
          this.$emit("update:empList", this.empList);
        }
      } else {
        this.checkAll = false;
        this.empList.forEach((element, index) => {
          if (item.id === element.id) {
            this.empList.splice(index, 1);
            const tetx = [];
            this.empList.map(item => {
              tetx.push(item.id);
            });
            this.$emit("returnBack", tetx.join(","));
            this.$emit("update:empList", this.empList);
          }
        });
      }
    },
    // 全选当前页面
    onCheckAll() {
      if (this.staffData.length === 0) {
        return;
      }
      this.checkAll = !this.checkAll;
      if (this.checkAll) {
        this.staffData.forEach(element => {
          if (!element.isTrue) {
            this.onRow(element);
          }
        });
      } else {
        this.staffData.forEach(element => {
          if (element.isTrue) {
            this.empList.forEach((esy, index) => {
              if (esy.id === element.id) {
                this.deleteItem(element, index);
              }
            });
          }
        });
      }
    },
    // 删除
    deleteItem(item, index) {
      this.empList.splice(index, 1);
      const tetx = [];
      this.empList.map(item => {
        tetx.push(item.id);
      });
      this.$emit("returnBack", tetx.join(","));
      this.$emit("update:empList", this.empList);
      this.staffData.forEach(element => {
        if (element.id === item.id) {
          element.isTrue = false;
          this.checkAll = false;
        }
      });
    },
    // 搜索
    onSearch() {
      this.checkAll = false;
      this.staffFrom.pageNo = 1;
      this.getPageEmpLists();
    }
  }
};
</script>

<style lang="scss" scoped>
.empList {
  color: var(--primary);
}
</style>
